<template>
	<view class="">
		<view v-if="url" class="video-box" :class="{'is-float-mode':mode == 'float'}">
		<view class="mask" v-if="mode == 'float'"></view>
		<video @click="showCloseBtnFn" :src="url" :autoplay="true" :page-gesture="true" :show-mute-btn="true"
			show-fullscreen-btn class="video"></video>
		<uni-icons v-if="showCloseBtn" @click="close" size="30px" color="#666" type="closeempty"
			class="close-icon"></uni-icons>
	</view>
	</view>
	
</template>

<script>
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	export default {
		data() {
			return {
				url: "",
				showCloseBtn: true,
				// 全屏模式和小窗模式，fullscreen为全屏模式，float为小窗模式
				mode: 'fullscreen',
			};
		},
		onLoad({
			url
		}) {
			// console.log({url});
			this.url = url
			setTimeout(() => {
				this.showCloseBtn = false
			}, 1000);
		},
		mounted() {
			// console.log('mounted');
			uni.$on('uni-im-playVideo', (url) => {
				this.mode = 'float'
				this.url = url
				this.showCloseBtn = true
			})

			// 监听esc按键，关闭视频
			// #ifdef H5
			uniIm.utils.appEvent.onKeyDown(evt => this.onDownEscapeKey, {
				order: 1000,
				match: {
					key: 'Escape',
					altKey: false,
					ctrlKey: false,
					shiftKey: false,
				}
			})
			// #endif
		},
		beforeDestroy() {
			// #ifdef H5
			uniIm.utils.appEvent.offKeyDown(this.onDownEscapeKey)
			// #endif
		},
		methods: {
			onDownEscapeKey() {
				if (this.url.length) {
					this.close()
				}
				return true
			},
			close() {
				if (this.mode == 'fullscreen') {
					uni.navigateBack()
				} else {
					this.url = ''
				}
			},
			showCloseBtnFn() {
				// console.log('showCloseBtnFn');
				this.showCloseBtn = true
				if (this.mode == 'fullscreen') {
					setTimeout(() => {
						this.showCloseBtn = false
					}, 5000);
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "@/uni_modules/uni-im/common/baseStyle.scss";

	page {
		height: 100%;
	}

	.video-box {
		&.video {
			width: 100vw;
			height: 100%;
		}

		.close-icon {
			position: absolute;
			top: 80px;
			left: 30rpx;
			z-index: 10;
			text-shadow: 0 0 15px black;
			/* #ifdef H5 */
			cursor: pointer;
			/* #endif */
		}

		&.is-float-mode,
		&.is-float-mode .video {
			position: fixed;
			top: 10vh;
			left: calc(10vw + 250px);
			width: calc(80vw - 220px) !important;
			height: 80vh !important;
			z-index: 9;
		}

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1;
		}
	}
</style>